import type { Dispatch } from "react"

/** 主题名称 */
export const themeNames = ["violet"]

/** 默认主题 */
export const defaultTheme = "violet"

/** 主题可选值类型 */
export type ThemeName = "violet"

/** 顶部导航栏背景色 */
const themeMapColor = {
    violet: "rgb(138, 43, 226)"
}

/**
 * changeStyle 修改样式的变量值的方法
 * @param obj 要修改的主题色的 js 对象
 */
const changeClassName = (className: ThemeName) => {
    try {
        // 获取对应节点设置变量
        ;(document.querySelector(":root") as HTMLBodyElement).className = `theme-${className}`
        const metaTheme = document.querySelectorAll("head meta[name=theme-color]")
        if (metaTheme[0] && className && themeMapColor[className]) {
            metaTheme[0].setAttribute("content", themeMapColor[className])
        }
    } catch (err) {
        console.error(err)
    }
}

/**
 * setTheme 设置主题色
 * @param themeName 要修改的主题色名称
 */
const setTheme = (themeName: ThemeName, changeStateTheme: Dispatch<ThemeName>) => {
    try {
        // 当前的主题色名称修改为传进来的名称
        localStorage.setItem("theme", themeName)

        // 判断传入的主题色名称是否有误
        const isHaveTheme = themeNames.includes(themeName)

        // 如果有该配置就直接修改
        if (isHaveTheme) {
            changeClassName(themeName)
            changeStateTheme(themeName)
        } else {
            // 否则使用默认的颜色配置
            localStorage.setItem("theme", defaultTheme)
            changeClassName(defaultTheme)
            changeStateTheme(defaultTheme)
        }
    } catch (err) {
        console.error(err)
    }
}

export { setTheme }
